<template>
  <div class="chat">
    <el-row>
      <el-col>
        <el-input
          v-model="title"
          class="w-50 m-2"
          size="large"
          placeholder="标题"
        />
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <sy-editor v-model:value="content"></sy-editor>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-button type="primary" @click="handleSave" class="saveBtn"
          >保存</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { SyEditor } from '@/base-ui/editor'
import { useStore } from '@/store'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'chat',
  components: { SyEditor },
  setup() {
    let content = ref<string>('<p style="text-align: left;"></p>')
    let title = ref<string>('')
    const store = useStore()
    const handleSave = () => {
      store.dispatch('system/createPageDataAction', {
        pageName: 'story',
        newData: { title: title.value, content: content.value }
      })
      ElMessage({
        message: '保存成功！',
        type: 'success'
      })
    }
    return { content, title, handleSave }
  }
})
</script>

<style scoped>
.saveBtn {
  margin: 10px 0px;
}
</style>
